<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="set">set</button>
    <button id="get">get</button>
    <button id="remove">remove</button>
    <button id="clear">clear</button>
</body>
<script>
    // 登录鉴权
    // web存储
    /*
       cookie：有时间限制 存储大小:几kb 
       localStorage：没有时间限制，只要不手动清除,就一直存在   存储大小:几Mb
       sessionStorage：没有时间限制，页面关闭后自动清除  存储大小:几Mb
    */
</script>
<script>
    //  localStorage
    console.log(localStorage);
    document.getElementById('set').onclick = function () {
        // 存数据  setItem(key,value) value只能是基本类型
        console.log('测试');
        var obj = {
            name: 'zs'
        }
        localStorage.setItem('key1', 'value1')
        localStorage.setItem('key2', 'value2')
        localStorage.setItem('obj', JSON.stringify(obj))
    }
    document.getElementById('get').onclick = function () {
        // 取数据  getItem(key)
        console.log(localStorage.getItem('key1'));
        console.log(JSON.parse(localStorage.getItem('obj')));

        // 通过索引获取key 
        console.log(localStorage.key(0));
        console.log(localStorage.key(1));
        console.log(localStorage.key(2));
    }
    document.getElementById('remove').onclick = function () {
        // 移除数据 removeItem(key)
        localStorage.removeItem('key1')
    }
    document.getElementById('clear').onclick = function () {
        // 清除数据 clear()
        localStorage.clear()
    }
</script>
<script>
    // sessionStorage
    console.log(sessionStorage);

    document.getElementById('set').onclick = function () {
        // 存数据  setItem(key,value) value只能是基本类型
        sessionStorage.setItem('key3', 'value3')
    }
</script>

</html>